<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>分配菜单</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="../../css/oksub.css">
	<link rel="stylesheet" href="../../libme/modules/dtree/dtree.css">
	<link rel="stylesheet" href="../../libme/modules/dtree/font/dtreefont.css">
	<script type="text/javascript" src="../../lib/loading/okLoading.js"></script>
</head>
<body>
<div class="ok-body">
	<!--form表单-->
	<!--<form class="layui-form layui-form-pane ok-form">-->
	<form class="layui-form ok-form" lay-filter="sysrole-menu">

		<input type="hidden" id="roleId" name="roleId" value="" lay-verify="required">

		<div class="layui-form-item">
			<label class="layui-form-label">角色名称</label>
			<div class="layui-input-block">
				<input type="text" class="layui-input" id="roleName" disabled>
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">角色别名</label>
			<div class="layui-input-block">
				<input type="text" class="layui-input" id="roleCode" disabled>
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">分配菜单</label>
			<!--<div class="layui-input-block">-->
				<div style="height: 200px;overflow: auto;width: 280px" id="toolbarDiv">
					<ul id="menus" class="dtree" data-id="0"></ul>
				</div>
			<!--</div>-->
		</div>

		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit lay-filter="menus">立即提交</button>
				<!--<button type="reset" class="layui-btn layui-btn-primary">重置</button>-->
			</div>
		</div>
	</form>
</div>
<!--js逻辑-->
<script src="../../lib/layui/layui.js"></script>
<script src="../../libme/pages/body.js"></script>
<script src="../../libme/script/pinyin.js"></script>
<script type="text/javascript">
	//http://www.wisdomelon.com/DTreeHelper/
	layui.use(["element", "form", "tree", "jquery","okMock", "api", "dtree"], function () {
		let form = layui.form;
		let dtree = layui.dtree;
        let okMock = layui.okMock;
        let $ = layui.jquery;
        let api = layui.api;
		okLoading.close();

        var dtreeObj = dtree.render({
            elem: "#menus",
            url: okMock.api.menu.dtree, // 使用url加载（可与data加载同时存在）
            dataStyle: "layuiStyle",    //使用layui风格的数据格式（使用"defaultStyle"出现无法加载数据情况）
            dataFormat: "list",         //配置data的风格为list
            response:{//返回JSON字段与DTree字段不一致时需要使用
                statusCode: 100, //返回码
			},//修改response中返回数据的定义
            ficon:["2", "8"], //一级图标样式  ["一级图标非叶子节点", "一级图标叶子节点"]  ,只使用一个的话,就是 "一级图标叶子节点"
            icon: "-1",  //修改二级图标样式
            line: true,
            initLevel: 1,//默认展开层级
            scroll:"#toolbarDiv", // 滚动框绑定div元素
            none:'查询不到数据',   //
            checkbar:true, //开启复选框
            checkbarType: "no-all", // 默认就是all，其他的值为： no-all  p-casc   self  only
            checkbarData: "halfChoose", // "choose" 记录选中（默认）， "change"：记录变更， "all"：记录全部， "halfChoose"："记录选中和半选（V2.5.0新增）"
            done: function(res, $ul, first){
                //res:当前异步加载的数据，$obj:当前组件的根节点的JQuery对象，first:是否首次加载
                if(first) {
                    //dtree.chooseDataInit("menus","1000001,1000003,1003,1000008"); // 初始化选中
                    // 或者是
                    // dtree.chooseDataInit("checkbarTreeInitchoose",["001001","001002"]); // 初始化选中
                    // 多级复选框下使用二维数组初始化
                    // dtree.chooseDataInit("checkbarTreeInitchoose",[["001001","001002"],["001003","001004"]]);
					api.request({
						url: okMock.api.role.findMenusByRoleId,
						where:{roleId: $('#roleId').val()}
					},function (res, status) {
                        //console.log(res.data);
                        dtree.chooseDataInit("menus",res.data); // 初始化选中
                    })
                }
            }
        });
        // 绑定节点点击事件
        dtree.on("node(menus)", function(obj){
            var nodeId = obj.param.nodeId;
            dtreeObj.clickNodeCheckbar(nodeId);// 点击节点选中复选框
        });


        form.verify({
            roleCode: function(value, item){ //value：表单的值、item：表单的DOM对象
                if(!new RegExp("^[a-zA-Z0-9_]+$").test(value)){
                    return '角色名不能有特殊字符';
                }
                if(/^\d+\d+\d$/.test(value)){
                    return '角色名不能全为数字';
                }
                if(!new RegExp("^[a-zA-Z0-9_]{4,24}$").test(value)){
                    return '角色名长度必须为4-24个字符';
                }
            }
        })

        form.on("submit(menus)", function (data) {
            // TODO 权限节点校验
			// 获取[{节点1},{节点2},{节点3}...]
            var paramsObj = dtree.getCheckbarNodesParam("menus");
            var paramsArr = dtree.getCheckbarJsonArrParam("menus");
            //console.log(paramsArr.nodeId)
            //return false;
			if(paramsArr.nodeId.length <= 0) {
			    api.yellowSighMsg("菜单未选中数据");
				return false;
            }
            console.log(paramsArr.nodeId)
            api.request({
                url:okMock.api.role.reGrantMenus,
                where: {roleId: $('#roleId').val(), ids: paramsArr.nodeId},//data.field, //
                traditional: true,
                dataType: api.jsonType.ujson
            },function (resp, stat) {
                api.greenTickMsg("添加成功", function () {
                    parent.layer.close(parent.layer.getFrameIndex(window.name));
                });
            })
            return false;
        });

	})
</script>
</body>
</html>
